<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    <title>用户操作</title>
</head>

<body>
    <div id="app">



        <router-view></router-view>



    </div>

    <template id="uerupdate">
        <div>
            <div>
                <button @click="save">保存</button>
            </div>
            <div>
                <input type="text" v-model="id" disabled>
                <input type="text" v-model="newpassword" placeholder="新密码">
            </div>
        </div>
    </template>

    <template id="addcom">
        <div>
            <div>
                <button @click="add">新增</button>
            </div>
            <div>
                <input type="text" v-model="username" placeholder="用户名">
                <input type="password" v-model="password" placeholder="密码">
                <input type="text" v-model="email" placeholder="邮箱">
            </div>
        </div>
    </template>

    <template id="userselect">
        <div>
            <div>
                <button @click="select">查询所有用户</button>
                <button @click="add">新增</button>
            </div>
            <table width="800" border="1">
                <tr>
                    <td>Id</td>
                    <td>username</td>
                    <td>password</td>
                    <td>email</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in users" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.password}}</td>
                    <td>{{item.email}}</td>
                    <td><button @click="del(item.id)">删除</button>
                        <button @click="update(item.id,item.password)">修改</button></td>
                </tr>
            </table>
        </div>

    </template>

    <script>
        var select = Vue.extend({
            template: "#userselect",
            data() {
                return {
                    users: [

                    ],
                }
            },
            methods: {
                select() {
                    this.get();
                },
                get() {
                    var _this = this;
                    axios.get("http://120.79.234.76:8091/201905/userSelect.php").then(
                        function (res) {
                            _this.users = res.data;//将服务器返回值赋值本地的users中,便于显示
                        }
                    )
                },
                add() {
                    this.$router.push({ name: "useradd" });//表示跳转到用户新增界面
                },
                del(id) {
                    var _this = this;
                    axios.get("http://120.79.234.76:8091/201905/userdelete.php", {
                        params: {
                            id: id
                        }
                    }).then(function (res) {
                        if (res.status == 200) {
                            alert(res.data.msg);

                            for (var i = 0; i < _this.users.length; i++) {
                                if (_this.users[i].id == id) {
                                    _this.users.splice(i, 1);//从界面删除这个位置
                                }
                            }

                        } else {
                            alert(res.data.msg);
                        }
                    });
                },
                update(id, psd) {
                    this.$router.push({
                        name: "userupdate", params: {
                            id,
                            psd
                        }
                    });
                },
            },
            created() {
                //组件创建的时候，执行
                this.get();
            }
        })
        //创建组件
        var add = Vue.extend({
            template: "#addcom",
            data: function () {
                return {
                    username: "",
                    password: "",
                    email: "",
                }
            },
            methods: {
                add() {
                    if (this.username == "" || this.password == "") {
                        alert("用户名或者密码不能为空");
                        return;//结束add函数运行
                    }

                    var _this = this;
                    axios.get("http://120.79.234.76:8091/201905/adduser.php", {
                        params: {
                            username: this.username,
                            psd: this.password,
                            email: this.email
                        }
                    }).then(function (res) {
                        if (res.status == 404) {
                            alert(res.data.msg);
                        } else {
                            _this.username = _this.password = _this.email = "";//清除输入
                            _this.$router.push("/");
                        }
                    });
                }
            }
        })

        var update = Vue.extend({
            template: "#uerupdate",
            data() {
                return {
                    id: 0,
                    newpassword: ""
                }
            },
            created: function () {
                this.id = this.$route.params.id;
                this.newpassword = this.$route.params.psd;
            },
            methods: {
                save() {
                    var _this = this;//保存当前的Vue实例
                    axios.get("http://120.79.234.76:8091/201905/userupdate.php", {
                        params: {
                            id: this.id,
                            psd: this.newpassword
                        }
                    }).then(
                        function (res) {
                            // alert(res.data.msg);
                            _this.id = 0;
                            _this.newpassword = "";
                            _this.$router.push({ name: "userselect" });//跳转到查询界面
                        }
                    )

                },

            }
        });

        var router = new VueRouter({
            routes: [
                { path: "/", component: select },
                { path: '/add', component: add, name: "useradd" },
                { path: '/select', component: select, name: "userselect" },
                { path: '/update', component: update, name: "userupdate" }
            ]
        });
        var vm = new Vue({
            el: "#app",
            router,
            data: {



            },
            methods: {





            }
        })
    </script>
</body>

</html>